<template>
    <div class="analysis-other-charts" style="padding:20px 0px;">
        <a-row :gutter="16">
            <a-col :span="24">
                <div class="charts" id="charts2"></div>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { Column } from "@antv/g2plot";
export default {
    mounted(){
        this.initChart();
    },
    methods:{
        initChart(){
           const data = [
                { type: 'PC网站', sales: 38, },
                { type: '原生APP', sales: 52, },
                { type: '微信程序', sales: 81, },
                { type: '支付宝小程序', sales: 21, },
                { type: '百度小程序', sales: 31, },
                { type: '高德小程序', sales: 91, },
                { type: '京东小程序', sales: 61, },

            ];

            const columnPlot = new Column('charts2', {
                data,
                height:350,
                xField: 'type',
                yField: 'sales',
                label: {
                    position: 'middle', // 'top', 'bottom', 'middle',
                    style: {
                    fill: '#FFFFFF',
                    opacity: 0.6,
                    },
                },
                xAxis: {
                    label: {
                    autoHide: true,
                    autoRotate: false,
                    },
                },
                meta: {
                    type: {
                    alias: '类别',
                    },
                    sales: {
                    alias: '销售额',
                    },
                },
            });

            columnPlot.render(); 
        },
    }
}
</script>

<style lang="less" scoped>
.analysis-other-charts{

}
</style>